<template>
	<div class="app-container">
		<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="100px">
			<el-form-item label="上传" prop="applyDoc" required>
				<el-upload ref="applyDoc" drag :file-list="applyDocfileList" :action="applyDocAction"
						   :before-upload="applyDocBeforeUpload" accept="image/*, .pdf, .doc, .docx">
					<el-icon class="el-icon--upload">
						<upload-filled/>
					</el-icon>
					<div class="el-upload__text">
						拖拽文件至此或<em>点击上传</em>
					</div>
					<template #tip>
						<div class="el-upload__tip">
							允许上传PDF文档、Word文档、图片
						</div>
					</template>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker
					readonly
					v-model="applyDate"
					type="date"
					placeholder="提交日期"
					value-format="YYYY-MM-DD"
				/>
			</el-form-item>
			<el-form-item label="审核状态">
				<el-tag :type="getStatusType">{{ status }}</el-tag>
			</el-form-item>
		</el-form>
	</div>
</template>
<script setup>
import {dayjs} from "element-plus";

const {
	proxy
} = getCurrentInstance()
const formRef = ref()
const data = reactive({
	formData: {
		applyDoc: null,
	},
	rules: {}
})
const {
	formData,
	rules
} = toRefs(data)
// 上传请求路径
const applyDocAction = ref('https://jsonplaceholder.typicode.com/posts/')
// 上传文件列表
const applyDocfileList = ref([])
const applyDate = ref(dayjs(new Date()).format("YYYY-MM-DD"))
const status = ref('待审核')

/**
 * @description 根据status获取审批状态颜色
 */
const getStatusType = computed(() => {
	switch (status.value) {
		case '待审核':
			return 'warning'
		case '审核通过':
			return 'success'
		case '审核驳回':
			return 'danger'
		default:
			return ''
	}
})

/**
 * @description 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function applyDocBeforeUpload(file) {
	let isRightSize = file.size / 1024 / 1024 < 2
	if (!isRightSize) {
		proxy.$modal.msgError('文件大小超过 2MB')
	}
	return isRightSize
}

/**
 * @description 表单提交方法
 * @return {*}
 */
function submitForm() {
	formRef.value.validate((valid) => {
		if (!valid) return
		// TODO 提交表单
	})
}

/**
 * @description 表单重置方法
 * @return {*}
 */
function resetForm() {
	formRef.value.resetFields()
}

</script>
<style>


</style>
